<template>
  <div class="splist">
    <div class="splist_cont">
      <div class="cont_view">
        <div class="body">
          <el-form
            ref="searchFormRef"
            :data="list"
            label-width="120px"
            class="demo-ruleForm addCoupon"
            size="large"
            status-icon
            :rules="rules"
            :model="list"
            @submit.prevent="submitFn"
          >
            <el-form-item label="分类名称" prop="name" required>
              <el-input v-model="list.name" />
            </el-form-item>
            <el-form-item label="上级分类" prop="level">
              <el-select placeholder="请选择分类" v-model="list.level">
                <el-option
                  v-for="item in state.rollList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="数量单位" prop="productUnit">
              <el-input v-model="list.productUnit" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="list.sort" />
            </el-form-item>

            <el-form-item label="是否显示" prop="showStatus">
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="list.showStatus" class="ml-4">
                  <el-radio :label="1" size="large">是</el-radio>
                  <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>

            <el-form-item label="是否显示在导航栏" prop="navStatus">
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="list.navStatus" class="ml-4">
                  <el-radio :label="1" size="large">是</el-radio>
                  <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="分类图标" required prop="icon">
              <el-upload class="upload-demo" list-type="picture">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传jpg/png文件,且不超过100kb
                  </div>
                </template>
              </el-upload>
            </el-form-item>
            <el-form-item label="筛选属性" prop="id" >
              <el-select placeholder="请选择分类" v-model="list.id">
                <!-- 另一个接口的数据 -->
                <el-option
                  v-for="item in state.attribute"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button>删除</el-button>
            </el-form-item>
            <el-button class="but" type="primary" size="default">新增</el-button>
            <el-form-item label="关键词" prop="keywords">
              <el-input v-model="list.keywords" />
            </el-form-item>
            <el-form-item label="分类描述" prop="description">
              <el-input v-model="list.description" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="default" @click="toAddFn"
                >提交</el-button
              >
              <el-button size="default" @click="submitFn">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, Ref, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { user } from "@/api";
import {
  ElMessageBox,
  ElMessage,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElRadioGroup,
  ElRadio,
  ElUpload,
  ElButton,
  FormInstance,
} from "element-plus";

// number
const showStatus = ref(1);
const navStatus = ref(1);

const router = useRouter();
const route = useRoute();

// 下拉框的变量
interface IRollList {
  lable: string;
  value: number;
}

interface IState {
  list: Icreate;
  rollList: any[];
  attribute: any[];
  listParams: productCategotyList;
  total: number;
}
const state = reactive<IState>({
  list: {
    productAttributeIdList: [],
    description: "",
    icon: "",
    keywords: "",
    name: "",
    navStatus: 0 | 1,
    parentId: 0,
    productUnit: "",
    showStatus: 0 | 1,
    sort: 0,
    level:"无上级分类",
    id:"",
  },
  rollList: [], //下拉下级的选择
  attribute: [], // 下拉筛选属性的选择
  listParams: {
    pageNum: 1,
    pageSize: 100,
    parentId: 0,
  },
  total: 0,
});

// 对表单的数据进行验证
const rules = {
  name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
};

// 请求上级分类的下拉框内容
user
  .productCategoryApi({
    pageNum: 1,
    pageSize: 100,
    parentId: 0,
  })
  .then((res) => {
    // console.log(res.data);
    if (res.code === 200) {
      state.rollList = res.data.list.map((item) => {
        return {
          value: item.id,

          label: item.name,
        };
      });
    }
  });

// 请求筛选属性下拉框的内容
user.productAttributeApi().then((res) => {
  if (res.code === 200) {
    console.log(res.data);

    state.attribute = res.data.map((item) => {
      console.log(res.data, 1);

      return {
        value: item.id,

        label: item.name,
      };
    });
  }
});

console.log(state.attribute);

// 提交按钮数据
const toAddFn = () => {
  ElMessageBox.confirm("是否提交数据?", "提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 添加完商品后发送请求
    user.productCategorycreateApi(state.list).then((res) => {
      console.log(state.list.name, 6);
      if (res.code === 200) {
        state.list = res.data;
      }
    });
    ElMessage({
      type: "success",
      message: "提交成功",
    });
    setTimeout(() => {
      router.push("/pms/productCate");
    }, 100);
  });
};

// 重置
const searchFormRef = ref<FormInstance>();
const submitFn = () => {
  searchFormRef.value?.resetFields();
};

const { list } = toRefs(state);
</script>

<style lang="less" scoped>
.splist {
  margin: auto;
  overflow-y: auto;
}

.breadcrumb {
  width: 100%;
  z-index: 999;
  background-color: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  top: 70px;
}

.splist_cont {
  margin-top: 50px;
  padding: 10px 20px;

  .cont_view {
    // position: absolute;
    left: 200px;
    right: 0;
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;

    .body {
      padding: 20px;
    }
  }
}
.but{
  margin-left: 120px;
  margin-bottom:10px;
}
</style>
